<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            user-select: none;
            /* 无法选中，整体感更强 */
        }

        html {
            height: 100%;
        }
        body {
            background-image: url("https://suyu2748.top/images/stadium.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .login{
            position: absolute;
            top: 30%;
            margin-top: -200px;
            left: 50%;
            margin-left: -200px;
            /* absolute居中的一种方法 */
            background-color: whitesmoke;
            width: 400px;
            height: 700px;
            border-radius: 25px;
            text-align: center;
            padding: 5px 40px;
            box-sizing: border-box;
            /* 这样padding就不会影响大小 */
        }

        p{
            font-size: 42px;
            font-weight: 600;
        }

        input{
            background-color: whitesmoke;
            width: 100%;
            height: 48px;
            margin-bottom: 10px;
            border: none;
            border-bottom: 2px solid silver;
            /* 下面的会覆盖上面的步伐 */
            outline: none;
            font-size: 22px;
        }

        .btn{
            background-color: #59c2c5;
            width: 38%;
            height: 48px;
            border-radius: 8px;
            margin-top: 40px;
            font-size: 28px;
            font-weight: 400;
            color: white;
        }
        .btn:hover{
            background-color: #59c2a0;
        }
        label[for="agree"] {
            display: block;
            margin-bottom: 10px;
        }

        #agree {
            margin-right: 5px;
            transform: scale(1.5);
            -webkit-appearance: none;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }

        #agree:checked {
            background-color: #0084ff;
            border-color: #0084ff;
        }
    </style>
</head>
<body>

<h1 style="text-align: center">注册页面</h1>
<div class="login">
    用户名: <input id="input1" type="text" name="username"/><br>
    密码: <input id="input2" type="password" name="password"/><br>
    电话: <input id="input3" type="text" name="phone"/><br>
<!--    性别: <input id="input4" type="text" name="gender"/><br>-->
    邮箱: <input id="input5" type="email" name="eam"/><br>
    年龄: <input id="input6" type="text" name="age"/><br>

    <label for="select_gender">请选择您的性别:</label>
    <select id="select_gender" name="gender">
        <option value="男">男</option>
        <option value="female">女</option>
    </select>
<br>
    <label for="agree">同意用户协议</label>
    <input id="agree" type="checkbox" name="agree">
    <br>
    <input class="btn" type="button" id="btn01" value="注册"> <br>
    <a href="/stadium/usermanagement_page/login.html">已经有账号了，点我登录</a>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script>
    const agree = document.getElementById('agree');
    const submitBtn = document.getElementById('btn01');

    agree.addEventListener('click', function() {
        if (this.checked) {
            submitBtn.disabled = false;
        } else {
            submitBtn.disabled = true;
        }
    });
    var student={};
    var arr=[];
    $(function(){
        $("#btn01").click(function(){
            var nm=$("#input1").val();
            var pw=$("#input2").val();
            var gd=$("#select_gender").val();
            var ph=$("#input3").val();
            var em=$("#input5").val();
            var ag=$("#input6").val();

            var user={"userAccount":nm,"userPassword":pw,"gender":gd,"phone":ph,"email":em,"age":ag};
            $.ajax({
                type:"post",
                url:"http://localhost:8080/stadium/common/register",
                data:JSON.stringify(user),
                dataType:"json",
                success:function(data) {
                    if(data == 1)
                    {
                        window.alert("注册成功");
                        // window.location.href = "http://localhost:8080/stadium/usermanagement_page/login.html";
                        window.location.href = "http://localhost:8080/stadium/usermanagement_page/login.html";
                    }
                    if(data == 0){
                        window.alert("用户名重复");
                    }

                }
            })
        })
    })
</script>
</body>
</html>